import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('lit-header')
export class LitHeader extends LitElement {
  static styles = css`
    .name { color: pink }
    .box {
      align-items: center;
      border: 1px #f0f0f0 solid;
      border-radius: 3px;
      display: flex;
      height: 80px;
      justify-content: center;
      transition: transform 8420ms ease-in-out;
      width: 80px;
    }
    .to-right {
      transform: translateX(250px);
    }
  `;

  @property({ type: String})
  name: string = 'Header';

  @property({ type: String})
  moveClass: string = 'box';

  @property({ type: Boolean})
  isMove: boolean = false;

  render() {
    return html`
      <div id="content">
        <div class="${this.moveClass}" @click=${this.move}>${this.name}</div>
      </div>
    `;
  }

  move() {
    this.isMove = !this.isMove;

    if (this.isMove) {
      this.moveClass = "box to-right";
    } else {
      this.moveClass = "box";
    }
  }

  connectedCallback() {
    super.connectedCallback();

    setTimeout(() => {
      this.name = "unset"
    }, 3000)
  }
}